<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <head th:include="include :: header"></head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--360浏览器优先以webkit内核解析-->
    <title>系统介绍</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/main/animate.min.css" th:href="@{/css/main/animate.min.css}" rel="stylesheet"/>
    <link href="../static/css/main/style.min862f.css" th:href="@{/css/main/style.min862f.css}" rel="stylesheet"/>
    <link th:href="@{/ajax/libs/jquery-layout/jquery.layout-latest.css}" rel="stylesheet"/>
    <link th:href="@{/ajax/libs/jquery-ztree/3.5/css/metro/zTreeStyle.css}" rel="stylesheet"/>

</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-4" style="width: 100%; height: 200px">
            <div class="fistDiv">
                <div class="ibox-title">
                    <h5>现有正式党员</h5>
                </div>
                <div class="ibox-content">
                    <span id="input1" name="input1" style="font-size: 30px">0</span><span>个</span>
                </div>
            </div>
            <div class="fistDiv">
                <div class="ibox-title">
                    <h5>现有发展对象</h5>
                </div>
                <div class="ibox-content">
                    <span id="input2" name="input2" style="font-size: 30px">0</span><span>个</span>
                </div>
            </div>
            <div class="fistDiv">
                <div class="ibox-title">
                    <h5>现有递交申请书</h5>
                </div>
                <div class="ibox-content">
                    <span id="input3" name="input3" style="font-size: 30px">0</span><span>个</span>
                </div>
            </div>
            <div class="fistDiv">
                <div class="ibox-title">
                    <h5>现有确定为积极分⼦</h5>
                </div>
                <div class="ibox-content">
                    <span id="input4" name="input4" style="font-size: 30px">0</span><span>个</span>
                </div>
            </div>
        </div>
        <div class="col-sm-4" style="width: 100%; height: 360px">
            <div class="iboxq">
                <div class="ibox-title">
                    <span class="label label-primary pull-right">NEW</span>
                    <h5>正式党员</h5>
                </div>
                <div class="col-xs-12 select-table table-striped" style="height: 310px ;overflow-y: auto">
                    <table id="bootstrap-table1"></table>
                </div>
            </div>
            <div class="iboxq">
                <div class="ibox-title">
                    <span class="label label-primary pull-right">NEW</span>
                    <h5>发展对象</h5>
                </div>
                <div class="col-xs-12 select-table table-striped" style="height: 310px ;overflow-y: auto">
                    <table id="bootstrap-table2"></table>
                </div>
            </div>
        </div>
        <div class="col-sm-4" style="width: 100%; height: 360px">
            <div class="iboxq">
                <div class="ibox-title">
                    <span class="label label-primary pull-right">NEW</span>
                    <h5>递交申请书</h5>
                </div>
                <div class="col-xs-12 select-table table-striped" style="height: 310px ;overflow-y: auto">
                    <table id="bootstrap-table3"></table>
                </div>
            </div>
            <div class="iboxq">
                <div class="ibox-title">
                    <span class="label label-primary pull-right">NEW</span>
                    <h5>确定为积极分</h5>
                </div>
                <div class="col-xs-12 select-table table-striped" style="height: 310px ;overflow-y: auto">
                    <table id="bootstrap-table4"></table>
                </div>
            </div>
        </div>

    </div>
</div>
<div th:include="include :: footer"></div>

<script th:src="@{/ajax/libs/jquery-layout/jquery.layout-latest.js}"></script>
<script th:src="@{/ajax/libs/jquery-ztree/3.5/js/jquery.ztree.all-3.5.js}"></script>
<script th:inline="javascript">
    var prefix = ctx + "system/user";
    var oneTableData = [];
    var twoTableData = [];
    var threeTableData = [];
    var fourTbleData = [];

    $(function () {
        selectUserCount();
    })
    $('#bootstrap-table1').bootstrapTable({
        url:  ctx + "system/user/officialPartyMember",
        method: "POST",
        columns: [
            {
                field: 'userName',
                title: '姓名'
            },
            {
                field: 'age',
                title: '年龄'
            },
            {
                field: 'partyTime',
                title: '入党时间'
            },
            {
                field: 'joinJobTime',
                title: '参加工作时间'
            },
            {
                field: 'phonenumber',
                title: '手机'
            }]
    });
    $('#bootstrap-table2').bootstrapTable({
        url:  ctx + "system/user/objectOfDevelopment",
        method: "POST",
        columns: [
            {
                field: 'userName',
                title: '姓名'
            },
            {
                field: 'age',
                title: '年龄'
            },
            {
                field: 'applicationTime',
                title: '确定发展对象时间'
            },
            {
                field: 'joinJobTime',
                title: '参加工作时间'
            },
            {
                field: 'phonenumber',
                title: '手机'
            }]
    });
    $('#bootstrap-table3').bootstrapTable({
        url:  ctx + "system/user/submitApplication",
        method: "POST",
        columns: [
            {
                field: 'userName',
                title: '姓名'
            },
            {
                field: 'age',
                title: '年龄'
            },
            {
                field: 'applicationTime',
                title: '递交申请书时间'
            },
            {
                field: 'joinJobTime',
                title: '参加工作时间'
            },
            {
                field: 'phonenumber',
                title: '手机'
            }]
    });
    $('#bootstrap-table4').bootstrapTable({
        url:  ctx + "system/user/identifiedAsAnActivist",
        method: "POST",
        columns: [
            {
                field: 'userName',
                title: '姓名'
            },
            {
                field: 'age',
                title: '年龄'
            },
            {
                field: 'applicationTime',
                title: '确定积极分子时间'
            },
            {
                field: 'joinJobTime',
                title: '参加工作时间'
            },
            {
                field: 'phonenumber',
                title: '手机'
            }]
    });

    function selectUserCount() {
        $.ajax({
            url: ctx + "system/user/selectSysUserCount",
            type: "POST",
            contentType: "application/json",
            success: function (data) {
                var input1 = data[1];
                var input2 = data[2];
                var input3 = data[3];
                var input4 = data[4];
                if (input1) {
                    document.getElementById("input1").innerHTML = input1;
                } else {
                    document.getElementById("input1").innerHTML = 0;
                }
                if (input2) {
                    document.getElementById("input2").innerHTML = input2;
                } else {
                    document.getElementById("input2").innerHTML = 0;
                }
                if (input3) {
                    document.getElementById("input3").innerHTML = input3;
                } else {
                    document.getElementById("input3").innerHTML = 0;
                }
                if (input4) {
                    document.getElementById("input4").innerHTML = input4;
                } else {
                    document.getElementById("input4").innerHTML = 0;
                }

                // $("input1").html("现在给span进行赋值操作");
                // iput1 = data[i].value;
                console.log(data);
            }
        })
    };

</script>
</body>

<style>
    .fistDiv {
        width: 20%;
        height: 130px;
        margin-left: 2%;
        margin-right: 2%;
        display: inline-block;
    }

    .iboxq {
        clear: both;
        margin-right: 2%;
        margin-left: 2%;
        padding: 0;
        width: 45%;
        height: 350px;
        display: inline-block;
    }
</style>

</html>
